<template>
<div class="log-list">
	<Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
		<FormItem>
			<Select clearable v-model="formItem.adminId" :style="{'width':'180px'}">
				<Option v-for="item in adminList" :value="item.id" :key="item.id">{{ item.name }}</Option>
			</Select>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="renderTable('formItem')">筛选</Button>
		</FormItem>
	</Form>
    <div class="action-btn">
		<Button @click="clearLog()" type="warning">清除日志</Button>
	</div>
    <Table border :columns="tableColumn" ref="tableList" :data="dataList" :loading="dataLoading"></Table>
    <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
        </div>
    </div>
</div>
</template>

<script>
export default {
	name: 'LogList',
	data() {
		return {
			dataLoading: true,
			formItem: {
				adminId: ''
			},
			pages: {
				current: 1,
				total: 0,
				size: 10
			},
			tableColumn: [
				{
					title: 'Id',
					key: 'id',
					width: 100
				},
				{
					title: '用户名',
					width: 100,
					key: 'username'
				},
				{
					title: '操作',
					width: 260,
					key: 'actionName'
				},
                {
					title: '数据',
					width: 500,
					key: 'data'
				},
				{
					title: '返回',
                    minWidth:500,
					key: 'resData'
				}
			],
			dataList: [],
			adminList: []
		}
	},
	created: function() {
		// 取数据
		this.getTableList();
		// 管理员信息
		this.$api.admin.listnames({pageSize:10000}).then(res => {
            this.adminList = res.result.list;
		});
	},
	methods: {
		getTableList() {
			var params = this.formItem;
            params.size = this.pages.size;
            params.page = this.pages.current;
            this.dataLoading = true;
			this.$api.log.list(params).then(res => {
                this.dataList = res.result.list;
                this.pages.total = res.result.count
			}).finally(e=>{
				this.dataLoading = false;
            });
		},
		renderTable() {
            this.pages.currentPage = 1;
            this.getTableList();
        },
		changePage() {
			this.pages.current = this.$refs['listPage'].currentPage;
			this.getTableList();
		},
		// 清除日志
		clearLog() {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>确认清除30天前的所有日志吗？</p><p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.log.clear().then(res => {});
				},
				onCancel: () => {
				}
			});
		},
	}
}
</script>
